<template>
  <div class="app-container">
    <el-row>
      <el-select v-model="choseConnect" size="small" filterable @change="switchConnect">
        <el-option v-for="connect in connects" :key="connect" :value="connect" :label="connect" />
      </el-select>
    </el-row>

    <!-- 主展示区 -->
    <el-tabs :active-name="tabs.activeTabName" @tab-click="switchTab">
      <el-tab-pane name="dashboard" label="系统概览">
        <dashboard ref="dashboard" :conn-name="choseConnect" />
      </el-tab-pane>
      <el-tab-pane name="thread" label="线程">
        <thread ref="thread" :conn-name="choseConnect" />
      </el-tab-pane>
      <el-tab-pane name="memory" label="内存">
        <memory ref="memory" :conn-name="choseConnect" />
      </el-tab-pane>
      <el-tab-pane name="spring" label="Spring" />
      <el-tab-pane name="mbean" label="mbean">
        <mbean ref="mbean" :conn-name="choseConnect" />
      </el-tab-pane>
      <el-tab-pane name="arthas" label="Arthas">
        <arthas ref="arthas" :conn-name="choseConnect" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import core from '@/api/core'

import dashboard from '@/views/monitor/jvm/dashboard'
import thread from '@/views/monitor/jvm/thread'
import mbean from '@/views/monitor/jvm/mbean'
import arthas from '@/views/monitor/jvm/arthas'
import memory from '@/views/monitor/jvm/memory'

const refreshComponent = ['dashboard', 'thread', 'arthas', 'memory']

export default {
  name: 'jvm',
  components: { dashboard, thread, mbean, arthas, memory },
  data() {
    return {
      connects: [],
      choseConnect: null,
      mBeanNames: [],
      tabs: {
        activeTabName: 'dashboard'
      },
      refreshInfo: {
        timer: null,
        interval: 60000
      }
    }
  },
  mounted() {
    this.loadConnects()

    if (!this.refreshInfo.timer) {
      this.refreshInfo.timer = window.setInterval(this.refreshModel, this.refreshInfo.interval)
    }
  },
  beforeDestroy() {
    window.clearInterval(this.refreshInfo.interval)
  },
  methods: {
    switchConnect(value) {
      this.choseConnect = value
      this.switchTab({ name: this.tabs.activeTabName })
    },
    loadConnects() {
      core.security.moduleConnectNames('jvm').then(res => {
        this.connects = res.data

        if (this.connects && this.connects.length > 0) {
          this.switchConnect(this.connects[0])
        }
      })
    },
    switchTab(tab) {
      this.tabs.activeTabName = tab.name
      this.$nextTick(() => {
        this.$refs[tab.name].init()
      })
    },
    refreshModel() {
      this.$nextTick(() => {
        for (let i = 0; i < refreshComponent.length; i++) {
          if (!this.$refs[refreshComponent[i]]) {
            console.log('当前刷新模型不存在:' + refreshComponent[i])
            continue
          }
          const refreshModel = this.$refs[refreshComponent[i]].refreshModel
          if (refreshModel && typeof (refreshModel) === 'function') {
            refreshModel()
          }
        }
      })
    }
  }
}
</script>


